<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('批量取消课程列表')">

</head>
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i> 批量取消课程列表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{'/lesson/list/page'}">
                        <div class="form-group" data-chosenWidth="true"  style="margin-bottom: 5px;">
                            <select name="pageSize" class="form-control input-sm" id="pagesize">
                                <option value="15" th:selected="${pageSize==15}">15条/页</option>
                                <option value="25" th:selected="${pageSize==25}">25条/页</option>
                                <option value="50" th:selected="${pageSize==50}">50条/页</option>
                            </select>
                            <select id="state" class="form-control input-sm" name="classState" style="min-width:120px;">
                                <option value="">--状态--</option>
                                <option value="1" th:selected="${classState==1}">已预约</option>
                                <option value="2" th:selected="${classState==2}">已完成</option>
                                <option value="3" th:selected="${classState==3}">旷课</option>
                                <option value="4" th:selected="${classState==4}">已取消</option>
                                <option value="5" th:selected="${classState==5}">学生评价</option>
                                <option value="6" th:selected="${classState==6}">老师评价</option>
                            </select>
                            <select class="selectpicker" name="listSscId" multiple data-live-search="true" th:title="请选择SSC" data-live-search-placeholder="搜索" data-actions-box="true">
                                <option th:each="item:${listSsc}" th:value="${item.id}" th:selected="${listSscId!=null?(#lists.contains(listSscId,item.id)):false}" th:text="${item.loginName}"></option>
                            </select>
                            <input type="search" name="searchTeaKey" id="searchTeaKey" th:value="${searchTeaKey}" class="form-control input-sm" placeholder="查询老师关键字..." style="width:200px;"/>
                            <input name="classStartTime" id="startDate" class="form-control input-sm" maxlength="10" style="min-width:100px;" th:value="${classStartTime}" placeholder="开始日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00',hmsMenuCfg:{H:[1,6],m:[20,3]},maxDate:'#F{$dp.$D(\'endDate\',{d:-1})}'})" autocomplete="off"/>
                            <input name="classEndTime" id="endDate" class="form-control input-sm" maxlength="10" style="min-width:100px;" th:value="${classEndTime}" placeholder="结束日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00',hmsMenuCfg:{H:[1,6],m:[20,3]},minDate:'#F{$dp.$D(\'startDate\',{d:1})}'})" autocomplete="off"/>
                            <div class="input-group input-group-sm">
                                <input type="search" name="searchKey" id="search" th:value="${searchKey}" class="form-control input-sm" placeholder="查询学员关键字..." style="width:200px;"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="submit" > 查 询 </button>
                                </span>
                            </div>&nbsp;
                            <button class="btn btn-sm btn-warning" id="batchCancel" type="button" disabled>批量取消</button>
                            <button class="btn btn-sm btn-primary" id="batchChange" type="button" disabled>批量加入调课计划</button>
                        </div>
                        <input type="hidden" id="tokenString" name="tokenString" th:value="${session.userToken}">
                        <input id="recorder" th:value="${session.loginname}" type="hidden"/>
                        <input id="recordId" th:value="${session.userid}" type="hidden"/>
                        <input id="bookedUrl" th:value="${bookedUrl}" type="hidden"/>
                        <input id="isRefresh" th:value="false" type="hidden"/>
                    </form>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center"><input type="checkbox" name="allchecked" value="0" id="allchecked"></th>
                            <th class="text-center">学号</th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">上课时间</th>
                            <th class="text-center">老师</th>
                            <th class="text-center" data-breakpoints="xs">上课方式</th>
                            <th class="text-center" >消耗课时/币</th>
                            <th class="text-center" data-breakpoints="xs">教材</th>
                            <th class="text-center">状态</th>
                            <th class="text-center" data-breakpoints="xs">订单</th>
                            <th class="text-center"  data-breakpoints="md">约课时间</th>
                            <th class="text-center" data-breakpoints="xs">课程顾问</th>
                            <th class="text-center" data-breakpoints="xs">SSC</th>
                            <th class="text-center" data-breakpoints="all" data-title="未完成课程原因">未完成课程原因</th>
                            <th class="text-center" data-breakpoints="all" data-title="本节课完成教材页码">本节课完成教材页码</th>
                            <th class="text-center" data-breakpoints="all" data-title="最后操作人">最后操作人</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody th:with="nowTime=${(new java.util.Date().getTime())},classEnd=${(new java.util.Date().getTime()-20*60*1000)}">
                        <tr th:each="item,itemStat:${pageInfo.list}">
                            <td class="text-center" th:text="${itemStat.index+1}"></td>
                            <td class="text-center">
                                <input type="checkbox" name="lessonId" th:disabled="${item.state==1 && item.isEnd==0 && nowTime>item.releaseTime.getTime()}" th:value="${item.lessonId}">
                            </td>
                            <td class="text-center"><a href="javascript:void(0)" th:text="${item.studentLogin}" th:onclick="|personInfo(${item.personId})|"></a> </td>
                            <td class="text-center" style="white-space:nowrap;" th:text="${item.cnName}"></td>
                            <td class="text-center" th:text="${#dates.format(item.releaseTime,'yyyy/MM/dd HH:mm')}"></td>
                            <td class="text-center">
                                <a href="javascript:" th:onclick="|showTeacherInfo(${item.teacherId})|" th:text="${item.teacherLogin}"></a>
                            </td>
                            <td class="text-center" th:text="${item.classWayName}"></td>
                            <td class="text-center" th:text="${item.payMoney.stripTrailingZeros().toPlainString()+' '+item.currencyTypeName}"></td>
                            <td class="text-center" th:text="${item.materialName+'('+item.materialPageExtent+')'}"></td>
                            <td class="text-center" th:switch="${item.state}" th:with="returnStr=${item.isReturn==1?(' ('+item.currencyTypeName+'已返还)'):''}">
                                <span th:case="1">
                                    <span class="label-primary label" th:if="${item.isEnd==0 && classEnd<=item.releaseTime.getTime() && item.changeId>0}" >待自动调课</span>
                                    <span class="label-warning label" th:if="${item.isEnd==0 && classEnd<=item.releaseTime.getTime()}" th:unless="${item.changeId>0}">待上课</span>
                                    <span class="label-default label" th:if="${item.isEnd==0 && classEnd>item.releaseTime.getTime()}">时间结束</span>
                                    <span class="label-info label" th:if="${item.isEnd==1}">已结束</span>
                                </span>
                                <span class="label-success label" th:case="2" th:text="'已完成'+${returnStr}">已完成</span>
                                <span class="label-danger label" th:case="3" th:text="'已旷课'+${returnStr}">已旷课</span>
                                <span class="label-default label" th:case="4" th:text="'已取消'+${returnStr}">已取消</span>
                            </td>
                            <td class="text-center" th:text="${item.packageName}"></td>
                            <td class="text-center" th:text="${#dates.format(item.bespeakTime,'yyyy/MM/dd H:m:s')}"></td>
                            <td class="text-center" th:text="${item.ccLogin}"></td>
                            <td class="text-center" th:text="${item.sscLogin}"></td>
                            <td th:utext="${item.noShowReason}"></td>
                            <td th:text="${item.state>1?item.materialPages:''}"></td>
                            <td th:text="${item.updater}"></td>
                            <td th:switch="${item.state}">
                                <span th:case="1">
                                    <button th:if="${session.menuMap[72] != null && nowTime<item.releaseTime.getTime()}" class="btn btn-danger btn-xs" th:id="'delpopover'+${item.lessonId}" rel="popover" th:onclick="|cancelCourseHtml(${item.lessonId},${item.changeId>0})|"><i class="glyphicon icon-white"></i>取消预约</button>
                                    <button th:if="${session.menuMap[73] != null && !(item.changeId>0)}" class="btn btn-primary btn-xs" th:onclick="layerOpenChangeWindow([[${item.lessonId}]],[[${item.studentLogin}]])"> <i class="glyphicon glyphicon-edit icon-white"></i> 调整课程 </button>
                                </span>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="https://hkres.etalk365.com/public/lib/popper/1.15.0/umd/popper.min.js"></script>
    <script src="../../static/lesson/changeClass.js" th:src="@{/static/lesson/changeClass.js?8}"></script>
    <script src="../../static/workflow/workflow_list.js" th:src="@{/static/workflow/workflow_list.js}"></script>
    <script src="../../static/js/openPerson.js" th:src="@{'/static/js/openPerson.js'}" ></script>
    <script src="../../static/js/layerTeacherInfo.js" th:src="@{/static/js/layerTeacherInfo.js?v=20210414}"></script>
    <script>
        $(function() {
            $('.footable').footable();
            $("#allchecked").click(function (){
                if ($(this).is(":checked")){
                    $(":checkbox").each(function (){
                        $(this).prop("checked",true);
                    });
                    $("#batchCancel").attr("disabled",false);
                    $("#batchChange").attr("disabled",false);
                }else {
                    $(":checkbox").each(function (){
                        $(this).prop("checked",false);
                    });
                    $("#batchCancel").attr("disabled",true);
                    $("#batchChange").attr("disabled",true);
                }
            });

            $("input[name='lessonId']").click(function (){
                if (!$(this).is(":checked")){
                    $("#allchecked").prop("checked",false);
                    if ($("input[name='lessonId']:checked").length===0) {
                        $("#batchCancel").attr("disabled", true);
                        $("#batchChange").attr("disabled",true);
                    }
                }else {
                    if ($("input[name='lessonId']:checked").length===$("input[name='lessonId']").length){
                        $("#allchecked").prop("checked",true);
                    }
                    $("#batchCancel").attr("disabled",false);
                    $("#batchChange").attr("disabled",false);
                }
            });

            $("#batchCancel").click(function (){
                if ($("input[name='lessonId']:checked").length === 0) {
                    layer.msg("请最少选一个课程进行操作", {icon: 2});
                    return false;
                }
                let lessonId=[];
                $("input[name='lessonId']:checked").each(function (){
                    lessonId.push($(this).val());
                })
                bathCancelCourseHtml(lessonId.join(','));
            })

            $("#batchChange").click(function (){
                if ($("input[name='lessonId']:checked").length === 0) {
                    layer.msg("请最少选一个课程进行操作", {icon: 2});
                    return false;
                }
                let lessonId=[];
                $("input[name='lessonId']:checked").each(function (){
                    lessonId.push($(this).val());
                })
                bathChangeCourseHtml(lessonId.join(','));
            })
        });
    </script>

</div>
</body>
</html>